<template>
  <view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view v-for="(item,i) in goodList" :key='i' @click='gotoDeatail(item)' >
        <my-goods :goods="item"></my-goods>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad(Option){
      // 将页面参数转存到 this.queryObj对象
      this.queryObj.query = Option.query || ''
      this.queryObj.cid = Option.cid || ''
      // 页面加载，调用方法获取商品数据
      this.getGoodsList()
    },
    data() {
      return {
        // 请求参数对象
        queryObj:{
          // 商品分类id
          cid:'',
          // 页面索引
          pagenum:1,
          // 页面信息条数
          pagesiez:20
        },
        // 商品列表
        goodList:[],
        // 总数量
        total:0,
         // 默认的空图片
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        // 是否在加载中
        loading:false
      };
    },
    methods:{
      // 定义获取商品列表方法
      async getGoodsList(cb){
        // 打开节流阀
        this.loading = true
        const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        // 关闭节流阀
         this.loading = false
        // &&表示并且，只有第一个条件为真时，才会去校验第二个条件。如果cb没有传递进来,undefined做判断会被转换为false。
        // cb&&cb()可以理解为，cb这个回调函数存在时才执行cb回调函数。
        // 只要数据请求完毕，就立即按需调用 cb 回调函数
        cb && cb()
        if(res.meta.status !== 200) return uni.$showMsg
        this.goodList = [...this.goodList,...res.message.goods]
        this.total = res.message.total
        console.log(this.goodList,this.total)
      },
      // 跳转到商品详情页面
      gotoDeatail(item){
        console.log(item)
        uni.navigateTo({
          url:'/subpkg/good_detail/good_detail?goods_id=' + item.goods_id
        })
      }
    },
    // 下拉刷新
    onPullDownRefresh(){
      //重置关键信息
      this.queryObj.pagenum = 1,
      this.loading = false,
      this.goodList = []
      this.total = 0
      // 重新发起请求
      this.getGoodsList(()=>uni.stopPullDownRefresh())
    },
    // 上拉触底加载
    onReachBottom(){
      // 判断是否还有下一页
      if(this.queryObj.pagenum * this.queryObj.pagesiez >= this.total) return uni.$showMsg('数据已全部加载完毕!')
      // 判断是否请求数据中
      if(this.loading) return
      // 修改关键常数
      this.queryObj.pagenum +=1
      // 发起数据请求
      this.getGoodsList()
    },
  }
</script>

<style lang="scss">
.goods-item{
  display: flex;
  padding: 10px 5px;
  border-bottom: solid 1px #F0F0F0;
  .goods-item-left{
    margin-right: 5px;
    .goods-pic{
      width: 100px;
      height:100px;
      display: block;
    }
  }
  .goods-item-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .good-name{
      font-size: 13px;
    }
    .goods-price {
      font-size: 16px;
      color: #c00000;
    }
  }
}
</style>
